<template>
  <div class="customer">
    <div class="customer-search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <div class="al-flex-row-wrap">
          <div class="search-column">
            <el-form-item label="用户昵称">
              <el-input size="small" class="al-width-240" v-model="search.keyword" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="客户状态">
              <el-select size="small" class="al-width-240" v-model="search.status" placeholder="用户状态" clearable>
                <el-option label="未流失" value="0"></el-option>
                <el-option label="已流失" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="添加时间" style="width: 470px">
              <el-date-picker v-model="search.addTime" type="datetimerange"
                              :picker-options="pickers"
                              size="small"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="流失时间" style="width: 470px">
              <el-date-picker v-model="search.delTime" type="datetimerange"
                              :picker-options="pickers"
                              size="small"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="跟进员工">
              <el-button size="mini" type="primary" @click="openDialog(1)">选择员工</el-button>
              <wx-concat :choiceConcats="search.users" :show.sync="dialog.user"
                         @sure="e=>search.users=e"/>
              <wx-tooltip class="al-width-300" :line="3">
                <wx-link tag closable v-for="(item,i) in search.users"
                         @close="removeSearch(1,i)"
                         :key="i">
                  {{ item.name }}
                </wx-link>
              </wx-tooltip>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="客户标签">
              <el-button size="mini" type="primary" @click="openDialog(0)">选择标签</el-button>
              <wx-tag :choiceTags="search.tags" :show.sync="dialog.tag" @sure="e=>search.tags=e"/>
              <wx-tooltip class="al-width-300" :line="3">
                <wx-link tag closable v-for="(item,i) in search.tags"
                         @close="removeSearch(0,i)"
                         :key="i">
                  {{ item.name }}
                </wx-link>
              </wx-tooltip>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--  数据  -->
    <div class="customer-data">
      <wx-table ref="tab" search-api="/wxqy/customer/list" :fixed-right="false"
                :labels="tableLabel" :controls="controls" :sticky="true" :contro-fun="tableControl">
        <template #name="{param}">
          <div class="customer-user">
            <div>
              <el-image style="width: 70px; height: 70px" :src="param.avatar"></el-image>
            </div>
            <span>{{ param.name }}</span>
          </div>
        </template>
        <template #followers="{param}">
          <div class="customers" v-for="(follow,i) in followerItems(param)" :key="i">
            <div :style="{color:follow.isDelete?'#ff0000':'#2e2d2d'}">{{ follow.name }}</div>
            <div v-if="follow.isDelete">
              <el-tag type="danger" size="mini">已流失</el-tag>
            </div>
          </div>
        </template>
        <template #tags="{param}">
          <div class="al-wx-tags" v-if="param.tags">
            <el-tag type="success" size="mini" v-for="(tag,i) in param.tags.split(',')">{{ tag }}</el-tag>
          </div>
        </template>
        <template #remarks="{param}">
          <wx-tooltip :line="3">
            <wx-link v-for="(remark,i) in customerRemark(param)">
              {{ remark }}
            </wx-link>
          </wx-tooltip>
        </template>
        <template #addTime="{param}">
          <span>{{ lastAddTime(param.lastAddTime) }}</span>
        </template>
      </wx-table>
    </div>
  </div>
</template>

<script>
import WxTable from "@/components/wxqy/table/WxTable";
import {timeFormatter, timeOut} from "@/utils/time";
import {pickerOptions} from "@/api/wxqy/const";
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";
import WxConcat from "@/components/wxqy/wxConcat/wxConcat";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import WxTag from "@/components/wxqy/wxTag/wxTag";

export default {
  name: "index",
  components: {WxTag, WxLink, WxConcat, WxTooltip, WxTable},
  data() {
    return {
      customerStatus: [{label: '流失', id: 0}, {label: '未流失', id: 1}],
      search: {tags: [], users: []},
      dialog: {user: false, tag: false, openUser: false, openTag: false},
      tableLabel: [{label: '客户', prop: 'name'}, {label: '客服', prop: 'followers'},
        {label: '标签', prop: 'tags'}, {label: '备注', prop: 'remarks'}, {label: '添加时间', prop: 'createTime'}],
      controls: [{label: '详情'}],
      pickers: pickerOptions
    }
  },
  methods: {
    tableControl(e) {
      let id = e.id
      this.$router.push({path: 'detail', query: {id}})
    },
    toSearch() {
      let params = Object.assign({}, this.search)
      if (params.addTime) {
        let addTime = params.addTime
        params['startAddTime'] = addTime[0]
        params['endAddTime'] = addTime[1]
      }
      if (params.delTime) {
        let delTime = params.delTime
        params['delStartTime'] = delTime[0]
        params['delEndTime'] = delTime[1]
      }
      params.users = (params.users || []).map(u => u.id).join()
      params.tags = (params.tags || []).map(u => u.id).join()
      delete params.addTime
      delete params.delTime
      this.$refs.tab.search(params)
    },
    openDialog(event) {
      let key = !event ? 'tag' : 'user'
      this.dialog[key] = true
    },
    removeSearch(type, index) {
      let key = !type ? 'tags' : 'users'
      this.search[key].splice(index, 1)
    },
    lastAddTime(time) {
      return timeFormatter(new Date(time))
    },
    followerItems(e) {
      let t = e.followers
      let list = []
      if (t) {
        t = t.split(',')
        for (let i = 0; i < t.length; i++) {
          let follower = t[i].split('@#_')
          if (follower.length === 2) {
            list.push({
              name: follower[0], isDelete: !!parseInt(follower[1])
            })
          } else {
            list.push({
              name: t[i].substring(0, t[i].length - 4), isDelete: !!parseInt(follower[follower.length - 1])
            })
          }
        }
      }
      return list
    },
    customerRemark(e) {
      if (e) {
        return e.remarks.split(',')
      }
      return []
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common.scss";

.customer {
  margin-top: 10px;
  height: 100%;
}

.customer-search {
  margin: 10px 10px 0 10px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, .1);
  background-color: #fff;
  border-radius: 10px;
}


.customer-data {
  padding: 10px;
  height: calc(100% - 140px);

  .customer-user, .customers {
    display: flex;

    span {
      margin-left: 4px;
    }
  }
}

.customer-search {
  ::v-deep.el-date-editor {
    width: 240px;
  }
}

.search-column {
  min-width: 470px;
}
</style>
